import React, { useState } from 'react';
import { Table, Space, Button, Modal, Card, Image } from 'antd';
import { snapId, update } from '../../services/order';
const { Column } = Table;
const { confirm } = Modal;

export default function List({ handleUpdate, show, orders, pagination }) {
  console.log();
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isVisible, setIsVisible] = useState(false);
  const [user, setUser] = useState({});
  const [order, setOrder] = useState({});
  const handleDel = async (id) => {
    confirm({
      content: "是否删除",
      async onOk() {
        let data = await update({ _id: id, state: '是' });
        console.log(data)
        show()
      }
    })
  }

  const handleChange = ({ current, pageSize }) => {
    console.log({
      current,
      pageSize
    })
    show({
      current,
      pageSize
    })
  }

  const handleUsers = (user) => {
    console.log(user);
    setUser(user);
    setIsModalVisible(true);
  }
  const handleOrder = async (user) => {
    console.log(user);
    let data = await snapId(user._id);
    console.log(data);
    setOrder(data);
    setIsVisible(true);
  }
  const handleCancel = () => {
    setIsModalVisible(false);
  }
  const handleOk = async () => {
    setIsModalVisible(false)
  }
  const handleCancel2 = () => {
    setIsVisible(false);
  }
  const handleOk2 = async () => {
    setIsVisible(false)
  }
  const handleRow = (record, index) => {
    if (record.state == "是") {
      return 'back';
    }
  }

  return (
    <Card style={{ marginTop: "20px" }}
    >
      <Table
        rowKey='_id'
        dataSource={orders}
        pagination={pagination}
        onChange={handleChange}
        rowClassName={handleRow}

      >
        <Column style={{ backgroundColor: 'black' }} title='下单时间' dataIndex='time' key='time' />
        <Column title='用户信息' dataIndex='users' key='users'
          render={(text, record) => (
            <Space size='middle'>
              <Button type='primary' onClick={() => handleUsers(record)}>显示用户信息</Button>
            </Space>
          )}
        />
        <Column title='商品快照' key='snap'
          render={(text, record) => (
            <Space size='middle'>
              <Button type='primary' onClick={() => handleOrder(record)}>显示商品快照</Button>
            </Space>
          )}
        />
        <Column
          title='操作'
          key='action'
          render={(text, record) => (
            <Space size='middle'>
              <Button type='primary' onClick={() => handleUpdate(record)}>修改</Button>
              <Button value='删除' type='primary' danger onClick={() => handleDel(record._id)}>
                删除
              </Button>
            </Space>
          )}
        />
        <Column />
      </Table>
      {user.users ? (
        <Modal
          title='用户信息'
          visible={isModalVisible}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <div>用户名：{user.users.username}</div>
          <div>密码：{user.users.pwd}</div>
          <div>昵称：{user.users.nickname}</div>
          <div>地址：{JSON.stringify(user.users.address)}</div>
        </Modal>
      ) : (<div></div>)}
      {order[0] ? (
        <Modal
          title='商品快照'
          visible={isVisible}
          onOk={handleOk2}
          onCancel={handleCancel2}
        >
          <div>商品名：{order[0].name}</div>
          <div>价格：{order[0].price}</div>
          <div>已售：{order[0].sale}</div>
          <div>商品图：  <Image
            width={200}
            src={"/api/images/" + order[0].shopImg[0]}
          /></div>
          <div>总数：{order[0].total}</div>
          <div>类型：{order[0].types}</div>
        </Modal>
      ) : (<div></div>)}
    </Card>
  )
}
